<template>
  <div class="nav">
    <div class="topfix">
      <h1>
        <p class="logo"><img src="../assets/logo.png" alt="" /></p>
        <span>凯丽音乐</span>
      </h1>
      <div><span>下载APP</span></div>
    </div>
    <div class="topnav">
      <router-link to="/"><span>推荐音乐</span></router-link>
      <router-link to="/hot"><span>热歌榜</span></router-link>
      <router-link to="/search"><span>搜索</span></router-link>
    </div>
  </div>
</template>

<style lang="less" scoped>
.nav {
  width: 100%;
  background-color: #d43c33;
  position: relative;
  padding-bottom: 122px;
  .topfix {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    padding: 0 10px;
    height: 84px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    background-color: #d43c33;
    width: 100%;
    h1 {
      position: relative;
      width: 142px;
      display: flex;
      align-items: center;
      .logo {
        display: inline-block;
        width: 30px;
        height: 30px;
        img {
          width: 100%;
        }
      }

      span {
        color: white;
        font-size: 20px;
      }
    }
    & > div {
      border: 1px;
      span {
        position: relative;
        display: inline-block;
        height: 36px;
        line-height: 36px;
        font-size: 16px;
        width: 100px;
        text-align: center;
        color: #d43c33;
        background-color: #fff;
        border-radius: 50px;
      }
    }
  }
  .topnav {
    // 如果出现脱离文档流，使用sticky粘性布局
    position: fixed;
    // position: sticky;
    z-index: 9;
    background-color: white;
    top: 84px;
    width: 100%;
    height: 38px;
    line-height: 38px;
    display: flex;
    border-bottom: 2px solid #eee;
    a {
      flex: 1;
      color: #222;
      text-align: center;
      font-size: 15px;
      position: relative;
      // 使用精确匹配
      &.top-exact-active {
        span {
          color: #dd001b;
          border-bottom: 2px solid #dd001b;
        }
      }
      span {
        padding: 0px 3px;
        white-space: nowrap;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -2px;
        display: inline-block;
      }
    }
  }
}
</style>